<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/conmon.css">
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
    <div class="demo">
        <div class="header">
            <div class="header_content">
                <div class="nav">
                    <h1 class="logo">英语作业批改系统</h1>
                    <ul class="register_login">
                        <li class="register">登录</li>
                        <li class="login">注册</li>
                    </ul>
                </div>
                <div class="submitstyle">
                    <div class="submit_title">上传文件：</div>
                    <form enctype="multipart/form-data" method="post" action="/upload" class="formcontent">
                        <input type="text" placeholder="浏览..." value="" class="filetext"
                               id="filetext"/>
                        <input type="file" name="file"
                               class="file" value="上传文件"
                               id="file"  onchange="document.getElementById('filetext').value=this.value"/>
                        <input type="submit" name="submit" value="" class="submit">
                    </form>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="main_left">
                <div class="content_top">
                    <h3>作文内容</h3>
                    <div class="content_time">批改时间：2017/3/3 22:34</div>
                </div>
                <div class="content">
                   <textarea class="text" placeholder="编辑你所需要批改的内容"> ${orgin_paper}
				   </textarea>
                </div>
                <div class="fl">
                    <span id="jk" class="title">清空</span>
                    <input name="snt_no_pred" class="carv" id="snt_no_pred" type="checkbox"> <label for="snt_no_pred">检查谓语动词</label>
                    <input name="snt_mul_tense" class="carv" id="snt_mul_tense" type="checkbox"> <label for="snt_mul_tense">检查语态一致</label>
                    <a>知识点定制</a>
                </div>
                <div class="fr">
                    <button class="btn">点击批改</button>
                </div>
            </div>
            <div class="main_right">
                <div class="main_right_test" id="mrtest">
                    <div class="con_navbar">
                        <div class="navlist active">分数评语</div>
                        <div class="navlist">拼写点评</div>
                        <div class="navlist">按句点评</div>
                    </div>
                    <div class="test_content">
						<div class="test"  style="display: block;" >
						    <div class="alert_test" style="padding:50px;text-align:center;display:none;">请点击“开始批改“按钮进行分析</div>
							<!--<div class="score">-->
								<!--78分-->
							<!--</div>-->
							<div class="range">
                                <div class="score">
                                    ${totalScore}分
                                </div>
                                <table class="mranger">
                                    <tr>
                                        <td style="width:25%;">词　　汇：</td>
                                        <td>
                                            <div class="ranger" >
                                                <div class="rdj-range">
                                                    <div class="range-runway"> </div>
                                                    <div class="range-thumb" style="width: ${spellings['spellingScore']}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>句　　子：</td>
                                        <td>
                                            <div class="ranger">
                                                <div class="rdj-range">
                                                    <div class="range-runway"> </div>
                                                    <div class="range-thumb" style="width: ${grammar['grammarCumScore']}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>篇章结构：</td>
                                        <td>
                                            <div class="ranger">
                                                <div class="rdj-range">
                                                    <div class="range-runway"> </div>
                                                    <div class="range-thumb" style="width: ${statistics['statisticsScore']}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>相关内容：</td>
                                        <td>
                                            <div class="ranger">
                                                <div class="rdj-range">
                                                    <div class="range-runway"> </div>
                                                    <div class="range-thumb"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <div class="pingyuW">
                                    <a href="#" target="_blank" >评语</a>：<span style="font-size:12px;">词汇表达灵活丰富请继续保持，也能较好的使用一定的高级词汇；全文结构较为严谨；增加一些从句的使用，文章会更棒。</span>
                                </div>
                            </div>
						</div>
						<div class="test test2">
						    <div class="alert_test" style="padding:50px;text-align:center;display:none;">请点击“开始批改“按钮进行分析</div>
							<!--<div class="score">-->
								<!--78分-->
							<!--</div>-->
							<div style="padding:10px;min-height:300px;">
                                <div class="evaluate">总 ${spellings['Spellings']} 个错误单词</div>
                                % for word in spellings["misspeltWordSug"]:
                                    <div class="evaluate">
                                        <h4>第${loop.index + 1}个 错误单词：${word}</h4>
                                        <div class="evaluate_paragraph">
                                            <span>${loop.index + 1}.</span>
                                            应该改为 ${spellings["misspeltWordSug"][word][0]}
                                            <span  class="ticon">√</span>
                                        </div>
                                        <ul class="evaluate_title">
                                            <li >
                                                或者可能为：${spellings["misspeltWordSug"][word]}
                                            </li>
                                        </ul>
                                    </div>
                                % endfor

                            </div>

						</div>
						<div class="test">
						    <div class="alert_test" style="padding:50px;text-align:center;">请点击“开始批改“按钮进行分析</div>
							<!--<div class="">-->
								<!--78分-->
							<!--</div>-->
							<div style="padding:10px;min-height:300px;">
                                % for sentence in grammar["grammarSentScore"]:
                                    <div class="evaluate">
                                        <h4>第${loop.index + 1}句</h4>
                                        <div class="evaluate_paragraph">
                                            <span>${loop.index + 1}.</span>
                                            ${sentence}
                                        </div>
                                        <ul class="evaluate_title">
                                            % if grammar["grammarSentScore"][sentence] > 4:
                                            <li >
                                               <span  class="ticon">√</span>
                                                这句很优雅，继续努力！得分:${grammar["grammarSentScore"][sentence]}
                                            </li>
                                            % else:
                                            <li>
                                                <span class="ficon">×</span>
                                                这句有待改进，继续努力！得分:${grammar["grammarSentScore"][sentence]}
                                            </li>
                                            % endif
                                        </ul>
                                    </div>
                                % endfor

                            </div>

						    </div>
						</div>

                    </div>






					<div style="padding-left:10px;font-size:12px;color:#444;margin-top:15px;">
			提示：
			<div style="padding-left:0px;font-size:12px;line-height:20px;">

	1.上传文件必须是文本格式，不可以是word <br>
	2.文章标题和正文内容要另起一行，第一行默认为标题 <br>
	3.现在系统还是demo阶段，请爱护她 <br>
            </div>
		</div>
                </div>
            </div>
        </div>
        <div class="footer" style="padding: 20px 0;text-align: center">
            English is a internationaly language which becomes importantly for modern world.
        </div>
    </div>
</body>
 <script>
     window.onload=function () {
         var mrtest=document.getElementById('mrtest');
         var navlist=mrtest.getElementsByClassName('navlist');
         var test=mrtest.getElementsByClassName('test');
         for(var i=0;i<navlist.length;i++){
             navlist[i].index=i;
             navlist[i].onclick=function(){
                 for(var j=0;j<navlist.length;j++){
                     navlist[j].className='navlist';
                     test[j].style.display='none';
                 }
                 navlist[this.index].className='navlist active';
                 test[this.index].style.display='block';
             };

         }
     }

    </script>
</html>
